<template>
    <view class="price">
		<text v-if="typeName" style="margin-right: 30rpx;">{{typeName}}</text>
        <text class="price-value">{{ formatPrice(value) }}</text>
		<text  class="price-unit" v-if="company">{{ computePriceUnit }}{{ ' / ' }}{{ company }}</text>
        <!-- <text class="price-unit">{{ computePriceUnit }}{{ ' / ' }}{{ computePayPeriod }}</text> -->
    </view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    name: 'price',
    props: {
        value: Number,
        unit: {
            default: 'USD'
        },
		company:{
			type: String,
			default:""
		},
        ratio: {
            default: 'month'
        },
		 typeName: {
		      type: String,
		      default: ''
		    },
    },
    data() {
        return {};
    },

    computed: {
        ...mapGetters([
            'priceUnit',
            'pricePeriod'
            // ...
        ]),
        computePriceUnit() {
            if (!this.priceUnit) {
                return '';
            }
			console.log('priceUnit',this.priceUnit)
            var data = this.priceUnit.find((item) => item.value == this.unit);
            return data ? data.text : '';
        },
        computePayPeriod() {
            if (!this.pricePeriod) {
                return '';
            }
            var data = this.pricePeriod.find((item) => item.value == this.ratio);
			// Daliy
            return data ? data.text : '';
        }
    },

    methods: {
        formatPrice: (price) => {
            return String(price).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
    }
};
</script>

<style lang="scss">
.price {
    color: $app-color-primary;
    font-size: 16px;
    &-unit {
        margin-left: 10px;
    }
}
</style>
